<template>
  <div>
    <!-- 游戏简介 -->
    <div class="game-introduce">
      <div class="introduce-title">
        <img src="../../../assets/img/detail/ic_game_introduction.png" alt="" />
        <span>游戏介绍</span>
      </div>
      <!-- 轮播图 -->
      <div class="screen-shot">
        <swiper :options="swiperOptions" class="screen-shot-box">
          <swiper-slide
            v-for="(item, index) in screenShot"
            :key="index"
            class="screen-shot-item"
          >
            <div>
              <img :src="item" alt="" @click="imgClick(index)" />
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <!-- 信息介绍 -->
      <div class="game-description">
        <div
          class="description"
          :style="{ height: isHeight === true ? 'auto' : '.773333rem' }"
        >
          {{ gameinfo.game_description }}
        </div>
        <div class="text-btn" v-show="!isHeight" @click="textOpen">
          <div>查看全部简介</div>
          <div class="icon">
            <img src="../../../assets/img/detail/down.png" alt="" />
            <span class="hidden">无</span>
          </div>
        </div>
        <div class="text-btn" v-show="isHeight" @click="textOpen">
          <div>收起</div>
          <div class="icon">
            <img src="../../../assets/img/detail/up.png" alt="" />
            <span class="hidden">无</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 变态福利 -->
    <div class="game-welfare" v-if="gameinfo.game_type === '1'">
      <div class="welfare-title">
        <img src="../../../assets/img/detail/ic_fuli.png" alt="" />
        <span>变态福利</span>
      </div>
      <div
        class="welfare"
        v-html="gameinfo.benefit_content"
        :style="{ height: isWelfareHeight === true ? 'auto' : '1.2rem' }"
      ></div>
      <div class="text-btn" v-show="!isWelfareHeight" @click="textWelfareOpen">
        <div>查看全部福利</div>
        <div class="icon">
          <img src="../../../assets/img/detail/down.png" alt="" />
          <span class="hidden">无</span>
        </div>
      </div>
      <div class="text-btn" v-show="isWelfareHeight" @click="textWelfareOpen">
        <div>收起</div>
        <div class="icon">
          <img src="../../../assets/img/detail/up.png" alt="" />
          <span class="hidden">无</span>
        </div>
      </div>
    </div>
    <!-- 充值返利 -->
    <div class="game-recharge" v-if="gameinfo.game_type === '1'">
      <div class="recharge-title">
        <img src="../../../assets/img/detail/ic_apply.png" alt="" />
        <span>充值返利</span>
      </div>
      <div
        class="recharge"
        v-html="gameinfo.rebate_content"
        :style="{ height: isRechargeHeight === true ? 'auto' : '1.2rem' }"
      ></div>
      <div
        class="text-btn"
        v-show="!isRechargeHeight"
        @click="textRechargeOpen"
      >
        <div>查看全部返利</div>
        <div class="icon">
          <img src="../../../assets/img/detail/down.png" alt="" />
          <span class="hidden">无</span>
        </div>
      </div>
      <div class="text-btn" v-show="isRechargeHeight" @click="textRechargeOpen">
        <div>收起</div>
        <div class="icon">
          <img src="../../../assets/img/detail/up.png" alt="" />
          <span class="hidden">无</span>
        </div>
      </div>
    </div>
    <!-- 游戏开服 -->
    <div class="game_server">
      <div class="server-title">
        <img src="../../../assets/img/detail/ic_server.png" alt="" />
        <span>游戏开服</span>
        <span class="server_title_tip">（仅供参考，以游戏内实际开服为准）</span>
      </div>
      <ul class="server_box" v-if="gameinfo.serverlist">
        <li 
          v-for="(item, index) in gameinfo.serverlist" 
          :key="index"
          class="server_list">
          <div class="server_icon">
            <img src="../../../assets/img/detail/icon_today_active.png" v-if="new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString()"/>
            <img src="../../../assets/img/detail/icon_today.png" v-else/>
            <div class="server_time" :class="[new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString() ? 'server_time_active': '']">{{item.begintime | timestampToTime}}</div>
            <div class="server_today" v-show="new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString()">今日</div>
          </div>
          <div 
            class="server_item_btn" 
            :class="[new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString() ? 'server_item_btn_active': '' ]"
            >
            {{item.servername}}</div>
        </li>
      </ul>
      <img class="game_server_jynone" v-else src="../../../assets/img/detail/jy_none1.png" alt="">
    </div>
    <!-- 猜你喜欢 -->
    <div class="game_guess">
      <div class="like-title">
        <img src="../../../assets/img/detail/ic_like.png" alt="" />
        <span>游戏介绍</span>
      </div>
      <ul class="like_box">
        <li class="like_list" v-for="(item, index) in gameinfo.like_game_list" :key="index">
          <img :src="item.gameicon" alt="">
          <div>{{item.gamename}}</div>
          <span>详情</span>
        </li>
      </ul>
    </div>
    <van-divider
      class="divider"
      :style="{ color: '#999999', borderColor: '#999999', padding: '0 .213333rem' }"
    >
      我是有底线的
    </van-divider>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import { ImagePreview } from "vant";
export default {
  props: {
    gameinfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: "auto",
        spaceBetween: 16,
      },
      isHeight: false,
      isWelfareHeight: false,
      isRechargeHeight: false,
    };
  },
  methods: {
    imgClick(index) {
      var image = this.screenShot;
      ImagePreview({
        images: image,
        startPosition: index,
      });
    },
    textOpen() {
      this.isHeight = !this.isHeight;
    },
    textWelfareOpen() {
      this.isWelfareHeight = !this.isWelfareHeight;
    },
    textRechargeOpen() {
      this.isRechargeHeight = !this.isRechargeHeight;
    },
  },
  computed: {
    // 获取游戏介绍轮播图
    screenShot() {
      return this.gameinfo.screenshot;
    },
    //游戏区服增加判断是否今日开服
    server() {
    }
  },
  filters: {
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var Y = date.getFullYear() + '-';
      var todayDate = new Date;
      var todayM = (todayDate.getMonth() + 1 < 10
          ? "0" + (todayDate.getMonth() + 1)
          : todayDate.getMonth() + 1) + "-";
      var todayD = (todayDate.getDate() < 10 ? "0" + todayDate.getDate() : todayDate.getDate()) + " ";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
      let strDate = M + D + h + m;
      return strDate;
    },
  },
};
</script>

<style lang="less" scoped>
.game-introduce {
  box-sizing: border-box;
  width: 9.2rem;
  margin: 0.266667rem 0.4rem 0;
  padding: 0.266667rem 0.266667rem 0;
  height: auto;
  background: #ffffff;
  border-radius: 0.213333rem;
}

.introduce-title {
  font-size: 0.426667rem;
  font-weight: 700;
  color: #222222;
  line-height: 0.8rem;
  display: flex;
  align-items: center;
}

.introduce-title img {
  width: .346667rem;
  height: .346667rem;
  margin-right: 0.133333rem;
}

.screen-shot-item {
  width: 3.333333rem;
  height: 5.533333rem;
}

.screen-shot-item div {
  width: 3.333333rem;
  height: 5.533333rem;
  border-radius: 0.266667rem;
  overflow: hidden;
}

.screen-shot-item div img {
  width: 100%;
  height: 100%;
}

.description {
  padding-top: 0.266667rem;
  font-size: 0.32rem;
  font-weight: 400;
  color: #333333;
  line-height: 0.386667rem;
  text-indent: 2em;
  overflow: hidden;
}

.text-btn {
  widows: 100%;
  height: 1.066667rem;
  display: flex;
  line-height: 1.066667rem;
  justify-content: center;
  align-items: center;
  font-size: 0.32rem;
  font-weight: 400;
  color: #288dff;
}

.text-btn .icon {
  display: flex;
  align-items: center;
  margin-left: 0.173333rem;
}

.text-btn .icon img {
  width: 0.24rem;
  height: 0.146667rem;
}

.hidden {
  width: 0;
  overflow: hidden;
}

.game-welfare,
.game-recharge,
.game_server,
.game_guess {
  box-sizing: border-box;
  width: 9.2rem;
  margin: 0.266667rem 0.4rem 0;
  padding: 0.266667rem 0.266667rem 0;
  height: auto;
  background: #ffffff;
  border-radius: 0.213333rem;
}

.welfare-title,
.recharge-title,
.server-title,
.like-title {
  font-size: 0.426667rem;
  font-weight: 700;
  color: #222222;
  line-height: 0.8rem;
}

.welfare-title img,
.recharge-title img,
.server-title img,
.like-title img {
  width: .346667rem;
  height: .346667rem;
  margin-right: 0.133333rem;
}

.welfare,
.recharge {
  font-size: 0.32rem;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  line-height: 0.4rem;
}

.server_title_tip {
  font-size: .32rem;
  color: #999;
}

.server_box {
  padding-bottom: .266667rem;
}

.server_list {
  width: 8.666667rem;
  height: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .32rem;
  .server_icon {
    display: flex;
    align-items: center;
    color: #333333;
    img {
      display: block;
      margin-right: .16rem;
      width: .213333rem;
      height: .213333rem;
    }
    .server_today {
      padding-left: .266667rem;
    }
  }
  .server_item_btn {
    width: 2.133333rem;
    height: .48rem;
    background: #FFFFFF;
    border: .013333rem solid #CCCCCC;
    color: #333333;
    text-align: center;
    border-radius: .24rem;
    font-size: .293333rem;
    line-height: .48rem;
  }
  .server_item_btn_active {
    border: .013333rem solid #ff5543;
    color: #ff5543;
  }
  .server_time {
    width: 2rem;
  }
  .server_time_active {
    color: #ff5543;
  }
  .server_today {
    color: #ff5543;
  }
}

.game_server_jynone {
  width: 5.333333rem;
  margin: .666667rem 1.666667rem;
}

.like_box {
  width: 100%;
  height: 2.666667rem;
  padding-bottom: .4rem;
  display: flex;
  .like_list {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: .346667rem;
    img {
      width: 1.466667rem;
      height: 1.466667rem;
    }
    div {
      width: 1.686667rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #333333;
    }
    span {
      width: 1.413333rem;
      height: .48rem;
      background: #FFEBEB;
      border-radius: .24rem;
      text-align: center;
      line-height: .48rem;
      font-size: .293333rem;
      color: #FF5543;
    }
  }
}

.divider {
  margin: .533333rem 0 2.666667rem;
}
</style>